<template>
  <div class='list-header'>
    <!-- 三级路由的导航栏，采用编程式导航 -->
    <ul class='nav-list'>
      <li>
        <!-- 参数为空则为推荐 -->
        <a href='#' :class="0 === styleIndex ? 'nav-item active' : 'nav-item'" @click.prevent='recommended(navPath);CourseStyle(0)'>推荐</a>
      </li>
      <li>
        <a href='#' :class="1 === styleIndex ? 'nav-item active' : 'nav-item'" @click.prevent='newest(navPath);CourseStyle(1)'>最新</a>
      </li>
      <li>
        <a href='#' :class="2 === styleIndex ? 'nav-item active' : 'nav-item'" @click.prevent='hottest(navPath);CourseStyle(2)'>热榜</a>
      </li>
      {{navPath}}
    </ul>

  </div>
</template>

<script>
export default {
  props: ['navPath'],
  data() {
    return {
      styleIndex: 0,
    }
  },
  methods: {
    //推荐
    recommended(navPath) {
      //如果没有navPath，默认为综合-推荐
      if (navPath === undefined) navPath = ''
      // 参数为空为推荐
      this.$router.replace('/' + navPath)
    },
    //最新
    newest(navPath) {
      //如果没有navPath，默认为综合
      if (navPath === undefined) navPath = ''
      this.$router.replace({
        path: '/' + navPath,
        query: {
          sort: 'newest',
        },
      })
    },
    //热榜
    hottest(navPath) {
      //如果没有navPath，默认为综合
      if (navPath === undefined) navPath = ''
      this.$router.replace({
        path: '/' + navPath,
        query: {
          sort: 'three_days_hottest',
        },
      })
    },
    //点击变色
    CourseStyle(index) {
      this.styleIndex = index
    },
  },
}
</script>

<style scoped>
.list-header {
  padding: 1.3rem 1rem;
  border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
  display: flex;
}
.list-header a {
  text-decoration: none;
  color: #909090;
}
.list-header a:hover {
  color: #1e80ff;
}
.nav-list {
  position: relative;
  max-width: 960px;
  height: 100%;
  display: flex;
  line-height: 1;
}
.nav-list .nav-item {
  left: 0;
  height: 100%;
  font-size: 1.17rem;
  color: #71777c;
  position: relative;
  cursor: pointer;
}
.nav-list .nav-item.active {
  color: #1e80ff;
}
</style>